<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<div class="workspace-machine-config">

  <!-- Title -->
  <div class="config-title-row" layout="row"
       layout-align="left"
       flex
       mouseover="hover=true" mouseout="hover=false">
    <div layout="row" layout-align="center center"
         ng-click="workspaceMachineConfigController.machineIsOpened=!workspaceMachineConfigController.machineIsOpened">
      <i class="config-title-action-show fa"
         ng-class="{'fa-chevron-circle-down': workspaceMachineConfigController.machineIsOpened, 'fa-chevron-circle-right': !workspaceMachineConfigController.machineIsOpened}"></i>
      <div class="config-title">{{workspaceMachineConfigController.machineName}}</div>
    </div>
    <div layout="row" layout-align="center center"
         class="config-title-action-edit"
         uib-tooltip="Edit"
         ng-click="workspaceMachineConfigController.showEditDialog($event)">
      <i class="fa fa-pencil" aria-hidden="true"></i>
    </div>
    <div flex ng-click="workspaceMachineConfigController.machineIsOpened=!workspaceMachineConfigController.machineIsOpened">
    </div>
    <div class="che-list-actions">
      <span class="config-title-action-delete" ng-click="workspaceMachineConfigController.deleteMachine($event)">
        <span class="fa fa-trash-o"></span>
      </span>
    </div>
  </div>

  <!-- Params -->
  <div class="config-params" ng-show="workspaceMachineConfigController.machineIsOpened">

    <!-- Source -->
    <che-label-container che-label-name="Source"
                         ng-if="workspaceMachineConfigController.machineConfig.source.image">
      <ng-form flex name="workspaceMachineConfigForm" class="config-machine-source">
        <che-input-box ng-model="workspaceMachineConfigController.newImage"
                       che-on-change="workspaceMachineConfigController.changeSource($value)"
                       che-name="source"
                       che-place-holder="Image"
                       che-form="workspaceMachineConfigForm"
                       required>
        </che-input-box>
      </ng-form>
    </che-label-container>

    <!-- RAM -->
    <che-label-container che-label-name="RAM">
      <div class="config-ram">
        <ng-form flex layout="column" name="workspaceMachineConfigForm">
          <che-workspace-ram-allocation-slider ng-model="workspaceMachineConfigController.newRam"
                                               che-on-change="workspaceMachineConfigController.updateRam(workspaceMachineConfigForm.$valid)"></che-workspace-ram-allocation-slider>
        </ng-form>
      </div>
    </che-label-container>

    <!-- Agents -->
    <che-label-container che-label-name="Agents">
      <div class="config-params-table">
        <che-machine-agents selected-machine="workspaceMachineConfigController.machineConfig"
                            on-change="workspaceMachineConfigController.updateAgents()"></che-machine-agents>
      </div>
    </che-label-container>

    <!-- Servers -->
    <che-label-container che-label-name="Servers">
      <div class="config-params-table">
        <list-servers servers="workspaceMachineConfigController.machineConfig.servers"
                      servers-on-change="workspaceMachineConfigController.updateServers()"></list-servers>
      </div>
    </che-label-container>

    <!-- Environment Variables-->
    <che-label-container che-label-name="Environment variables"
                         ng-if="workspaceMachineConfigController.machineConfig.canEditEnvVariables">
      <div class="config-params-table">
        <list-env-variables env-variables="workspaceMachineConfigController.machineConfig.envVariables"
                            env-variables-on-change="workspaceMachineConfigController.updateEnvVariables()"></list-env-variables>
      </div>
    </che-label-container>

    <!-- Delete -->
    <che-label-container class="config-delete-label"
                         che-label-name="Delete machine"
                         che-label-description="Environment should contain at least one machine.">
      <che-button-danger che-button-title="Delete"
                         ng-disabled="workspaceMachineConfigController.machineConfig.isDev"
                         ng-click="workspaceMachineConfigController.deleteMachine()"></che-button-danger>
    </che-label-container>
  </div>
</div>
